<template>
    <div class="punishment-dialog-box">

        <el-dialog
            title="追加惩罚"
            class="dialog-box"
            :visible.sync="showDialog"
            width="500px">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                <el-form-item label="违规行为" prop="reason">
                    <el-input type="textarea" v-model="ruleForm.reason" @input="reasonChange" placeholder="追加理由，会通知用户，请以官方书面风格填写"></el-input>
                </el-form-item>
                <el-form-item label="罚款金额" prop="piece">
                    <el-input-number v-model="ruleForm.piece" :min="1"></el-input-number> 趣宝石
                </el-form-item>
                <el-form-item label="账号限制惩罚" prop="type">
                    <el-radio-group v-model="ruleForm.type">
                        <el-radio :label="0">无</el-radio>
                        <el-radio :label="1">禁趣交易功能</el-radio>
                        <el-radio :label="2">平台封号</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="封禁天数" prop="limitDay">
                    <el-input-number v-model="ruleForm.limitDay" :min="1"></el-input-number> 天
                </el-form-item>
            </el-form>

            <div class="submit-box">
                <el-button @click="resetForm">取消</el-button>
                <el-button type="success" @click="submitForm">确认提交</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props: ['value'],

    data () {
        return {
            showDialog: false,
            ruleForm: {
                reason: '',
                piece: '',
                type: 0,
                remark: '',
                limitDay: 1
            },
            rules: {
                reason: [
                    { required: true, message: '请输入违规行为', trigger: 'blur' }
                ],
                piece: [
                    { required: true, message: '请输入罚款金额', trigger: 'change' }
                ],
                type: [
                    { required: true, message: '请选择账号限制惩罚', trigger: 'change' }
                ],
                limitDay: [
                    { required: true, message: '请填写封禁天数', trigger: 'change' }
                ]
            }
        }
    },

    created () {
        this.showDialog = this.value
    },

    watch: {
        showDialog (val) {
            this.$emit('input', val)
        },
        value (val) {
            this.showDialog = val
        }
    },

    methods: {
        // 提交
        submitForm () {
            this.ruleForm.orderId = this.$route.query.id
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    this.$http.post('/trade/addPunish', this.ruleForm).then(res => {
                        if (res.code === '0') {
                            this.$message({
                                type: 'success',
                                message: '追加成功'
                            })
                            this.ruleForm = {
                                reason: '',
                                piece: '',
                                type: 0,
                                limitDay: 1
                            }
                            this.$emit('submit', res.data)
                        } else {
                            this.$message({
                                type: 'error',
                                message: res.desc
                            })
                        }
                    })
                    this.showDialog = false
                } else {
                    return false
                }
            })
        },
        reasonChange (val) {
            console.log(val, this.ruleForm)
        },
        resetForm () {
            this.showDialog = false
        }
    }
}
</script>

<style lang="scss" scoped>
    .dialog-box {
        /deep/ .el-dialog__body {
            padding: 0 20px 20px;
        }
        .submit-box {
            display: flex;
            justify-content: flex-end;
        }
    }
</style>
